<template>
  <div class="register-warpper">
    <!-- <headers :title="'注册'"/> -->
    <div class="topBox flex">
      <span>Hi, 欢迎你！</span>
      <div>
        <img class="avatar" src="../assets/images/2.png">
      </div>
    </div>
    <group>
      <x-input placeholder="请输入手机" placeholder-style="color:#f00;" type="number" is-type="china-mobile" show-clear v-model="phone"></x-input>
      <x-input placeholder="请输入验证码"  show-clear v-model="code">
        <span :style="{color:colorFlag,fontSize:'12px'}" slot="right" type="primary" @click="fetchCode(phone)">{{codeBtnText}}</span>
      </x-input>
      <x-input type="password" placeholder="请输入密码"  show-clear v-model="password"></x-input>
      <x-input type="password" placeholder="请确认密码"  show-clear v-model="repassword"></x-input>
      <!-- <div class="selectBox">
        <select v-model='schoolId'>
          <option class="firstOpt" value='' disabled selected style='display:none;'>请选择学校</option>
          <option v-for='school in schoolList' :value='school.id'>{{school.name}}</option>
        </select>
      </div> -->
      <cell :title="schoolName" style="border-bottom: 1px solid #ddd;font-size: 15px;"></cell>
      <!-- <x-input placeholder="请选择学校"  show-clear v-model="schoolId">
        <select style="border:0;" slot="right" v-model='schoolId'>
          <option v-for='school in schoolList' :value='school.id'>{{school.name}}</option>
        </select>
      </x-input> -->
      <!-- <div class="fengeBar"></div> -->
    </group>
    <div class="next-box" @click="handleConfirm">
      <span>注册</span>
    </div>
    <div class="bomBox">
      已有账户 <span class="redLink" @click="goLogin"> 立即登录</span>
    </div>
  </div>
</template>

<script>
  import axios from '@/api/request'
  import headers from '../components/header.vue'
  import { Group,XInput,Cell,CheckIcon,XDialog,XButton } from "vux";
  import { mapState, mapGetters, mapMutations } from "vuex";
  export default {
    name: '',
    components: {
      Cell,
      Group,
      headers,
      XInput,
      CheckIcon,
      XDialog,
      XButton
    },
    data () {
      return {
        name: '',
        phone: '',
        password: '',
        repassword: '',
        code: '',
        addressList: [],
        defaultValue: '',
        isNew: false,
        chooseKind: true,
        schoolId: '',
        schoolList: [],
        openId: '',
        codeBtnText: '',
        codeFlag: true,
        countNum: 60,
        colorFlag: '#000',
        _schoolCode: '',
        schoolName: ''
      }
    },
    computed:{
        ...mapGetters({
          // userId: 'doneUserId',
          // phone: 'donePhone',
          // schoolId: 'doneSchoolId',
          schoolCode: 'doneSchoolCode',
        }),
    },
    created(){
      this.openId = this.$route.query.openId
      if(!this.openId){
        this.$vux.toast.text('openId为空,请退出后重新进入', 'middle')
      }
      this._schoolCode = this.$route.query.schoolCode
      if(this._schoolCode){
        this.getSchoolByCode()
      }else{
        this._schoolCode = this.schoolCode
        this.getSchoolByCode()
      }
      // this.fetchSchoolList()
    },
    mounted(){
      this.codeBtnText="获取验证码"
    },
    methods:{
      ...mapMutations(['SET_OPENID','SET_USERID','SET_PHONE','SET_SCHOOLID','SET_PASSWORD']),
      // fetchSchoolList() {
      //   axios('/device/school/list','post',{}).then(res=>{
      //     if(res.data.code==1000){
      //         // console.log(res)
      //       let arr = res.data.data.list
      //       this.schoolList = arr
      //       console.log(this.schoolList)
      //       this.schoolId = this.schoolList[0].id
      //     }
      //   })
      // },
      setDefault(setDefault){
        console.log(setDefault)
      },
      fetchCode(phone){
        let self = this
        if(phone){
          if(this.codeFlag){
            self.changeCodeText(self.countNum)
            axios('/device/SMSCloud/SendOut','post',{phone}).then(res=>{
              if(res.data.code==1000){
                console.log(res)
              }else if(res.data.code==1011){
                self.$vux.toast.text('请输入正确的手机号', 'middle')
              }else{

              }
            })
          }else{
            return false
            // this.$vux.toast.text('请不要重复点击', 'middle')
          }
        }else{
          this.$vux.toast.text('请填手机号', 'middle')
        }
      },
      changeCodeText(num){
        let self = this
        this.codeFlag = !this.codeFlag
        var timer = setInterval(function(){
          num--
          self.codeBtnText = num+' S'
          self.colorFlag = '#ff485f'
          if(num==0){
            self.codeFlag = !this.codeFlag
            self.colorFlag = '#000'
            self.codeBtnText="获取验证码"
            clearInterval(timer)
          }
        },1000)
      },
      handleConfirm(){
        let self = this
        let data = {
            openId: this.openId,
            // openId: 'ouRjc0rqMIlDMTANdueaMNj-ezhA',
            // openId: 'ouRjc0iMl5OGzP8aLus4MOVJP0C4',
            username: this.phone,
            password: this.password,
            schoolId: this.schoolId,
            code: this.code,
        }
        if(this.password!==this.repassword){
          this.$vux.toast.text('两次密码不一致', 'middle')
          return false
        }
        if(data.username&&data.password&&data.schoolId){
          axios('/device/userEntity/register','post',data).then(res=>{
            if(res.data.code==1000){
                console.log(res)
                this.$vux.toast.text('注册成功', 'middle')
                self.SET_OPENID(res.data.data.openId)
                self.SET_USERID(res.data.data.id)
                self.SET_PHONE(res.data.data.username)
                self.SET_SCHOOLID(res.data.data.schoolId)
                self.SET_PASSWORD(res.data.data.password)
                this.$router.push({path:'home',query:{userId: res.data.data.id}})
                self.IMregister(self.phone,self.password,res.data.data.nickname)
            }else if(res.data.code==1015){
              this.$vux.toast.text('该手机号已注册', 'middle')
            }else if(res.data.code==1014){
              this.$vux.toast.text('验证码错误', 'middle')
            }else{

            }
          })
        }else{
          this.$vux.toast.text('请填完整后再提交', 'middle')
        }
      },
      openPriceDialog(){
      	this.chooseKind = true
      },
      goLogin(){
        this.$router.push({path: '/login',query:{openId: this.openId}})
      },
      IMregister(username,pwd,nickname) {
        var option = {
          username: username,
          password: pwd,
          nickname: nickname,
          appKey: this.$WebIM.config.appkey,
          success: function () {
              // alert('regist success!');
              console.log('regist success!');
          },
          error: function () {
              // alert('regist error');
              console.log('regist error');
          },
          apiUrl: this.$WebIM.config.apiURL
        };
        this.$imConn.registerUser(option);
      },
      getSchoolByCode() {
        axios('/device/school/getByCode','post',{schoolCode: this._schoolCode}).then(res=>{
            if(res.data.code==1000){
                console.log(res)
                this.schoolId = res.data.data.id
                this.schoolName = res.data.data.name
            }
        })
      }
    }

  };
</script>

<style >
    body{
        position: absolute;
        left: 0;
        top: 0;
        /*background: rgb(244,244,244);*/
        width: 100%;
        height: 100%;
        overflow: hidden;
    }
    .register-warpper .weui-cells.vux-no-group-title{
      margin-top: 0;
    }
    .register-warpper .weui-cells:before{
      border-top: 0;
    }
    .register-warpper input::-webkit-input-placeholder{
      color: #aaa;
      font-size: 30rem/75;
    }
</style>
<style lang="less" scoped>
  .register-warpper{
    height: 100%;
    box-sizing: border-box;
    padding: 0 104rem/75;
    background: #fff;
    .weui-cells .weui-cell:before {
      left: 0;
      border-top: 0;
    }
    .weui-cell {
      padding-left: 14rem/75;
      border-top: 1px solid #ddd;
    }
    .weui-cell:first-child {
      border-top: 0;
    }
    .vux-x-input.weui-cell{
      height: 110rem/75;
      padding-top: 30rem/75;
      padding-bottom: 0;
    }
    .weui-cell{
      height: 110rem/75;
      padding-top: 30rem/75;
      padding-bottom: 0;
    }
    .weui-cells:after{
      height: 0;
      border-bottom: none;
    }
  	.topBox{
      height: 350rem/75;
      align-items: center;
      justify-content: space-between;
      span{
        font-size: 46rem/75;
        color: #444;
        font-weight: 600;
      }
  		.avatar{
        height: 150rem/75;
        width: 150rem/75;
        border-radius: 50%;
      }
  	}
    div.weui-cells{
      margin-top: 5px;
    }
    div.vux-x-switch.weui-cell.weui-cell_switch:before{
      border-top: 0;
    }
    .selectBox{
      height: 55px;
      border-top: 1px solid #ddd;
      select{
        width: 100%;
        height: 100%;
        border: 0;
        padding-left: 8rem/75;
        padding-top: 24rem/75;
        color: #000;
        background: #fdfdfd;
        font-size: 34rem/75;
      }
      .firstOpt{
        color: #aaa;
        font-size: 30rem/75;
      }
    }
    .fengeBar{
      height: 20rem/75;
      background: rgb(244,244,244);
    }
    .next-box{
  	  width: 544rem/75;
      height: 90rem/75;
      line-height: 90rem/75;
      background: #ff485f;
      color: #fff;
      text-align: center;
      font-size: 35rem/75;
      margin-top: 108rem/75;
      border-radius: 8rem/75;
    }
    .bomBox{
      text-align: center;
      margin-top: 36rem/75;
      color: #999;
      .redLink{
        color: #ff485f;
      }
    }
  }

</style>

